<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3</title>
    <style>
        #p1{
            text-align: center;
            color: red;
        }
        #p2{
            background-color: aquamarine;
        }
        .div1{
            width: 320px;
            height: 320px;
            background-image: url("lv.jpg");
        }
        .a1:link{
            color: blue;
        }
        .a1:visited{
            color: red;
        }
        .a1:hover{
            color: aqua;
        }
        .a1:active{
            color: chartreuse;
        }
        .none {border-style:none;}
        .dotted {border-style:dotted;}
        .dashed {border-style:dashed;}
        .solid {border-style:solid;}
        .double {border-style:double;}
        .groove {border-style:groove;}
        .ridge {border-style:ridge;}
        .inset {border-style:inset;}
        .outset {border-style:outset;}
        .hidden {border-style:hidden;}
        .p3{
            border-top-style:dotted;
            border-right-style:solid;
            border-bottom-style:dashed;
            border-left-style:double;
        }
        .div2{
             position: fixed;
             top: 50px;
             left: 500px;
             width: 100px;
             height: 100px;
             background-color: blueviolet;
         }
        .div3{
            position:relative;
            top: 50px;
            left: 500px;
            width: 100px;
            height: 100px;
            background-color:coral;
        }
        .div4{
            position:absolute;
            top: 50px;
            left: 500px;
            width: 100px;
            height: 100px;
            background-color:royalblue;
        }
        ul
        {
            list-style-type:none;
            margin:0;
            padding:0;
        }
    </style>
</head>
<body>
<p id="p1">hello world!!</p>
<p id="p2">this</p>
<div class="div1" ></div>
<a href="#" class="a1">这是链接</a><br>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
<p class="p3">这个边框上下左右都不同</p>
<div class="div2">固定定位</div>
<div class="div3">相对定位</div>
<div class="div4">绝对定位</div>
<ul>
    <li><a href="default.asp">Home</a></li>
    <li><a href="news.asp">News</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About</a></li>
</ul>
</body>
</html>